<template>
  <div class="detail-container">
    <Header />
    <div class="detail-card">
      <div class="detail-header">
        <h2>{{ isEditMode ? '编辑主持经历' : '添加主持经历' }}</h2>
        <button @click="goBack" class="back-btn">
          <i class="iconfont icon-back"></i> 返回列表
        </button>
      </div>

      <form class="experience-form" @submit.prevent="saveExperience">
        <div class="form-group">
          <label for="date">日期 <span class="required">*</span></label>
          <input
            type="date"
            id="date"
            v-model="formData.date"
            required
          >
        </div>

        <div class="form-group">
          <label for="event">活动名称 <span class="required">*</span></label>
          <input
            type="text"
            id="event"
            v-model="formData.event"
            required
            placeholder="请输入活动名称"
          >
        </div>

        <div class="form-group">
          <label for="role">角色 <span class="required">*</span></label>
          <select
            id="role"
            v-model="formData.role"
            required
          >
            <option value="">请选择角色</option>
            <option value="主持人">主持人</option>
            <option value="开场主持">开场主持</option>
            <option value="主场主持">主场主持</option>
            <option value="嘉宾主持">嘉宾主持</option>
          </select>
        </div>

        <div class="form-group">
          <label for="notes">备注</label>
          <textarea
            id="notes"
            v-model="formData.notes"
            rows="4"
            placeholder="请输入备注信息（选填）"
          ></textarea>
        </div>

        <div class="form-actions">
          <button type="button" @click="goBack" class="cancel-btn">取消</button>
          <button type="submit" class="save-btn">保存</button>
        </div>
      </form>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

// 表单数据
const formData = ref({
  date: '',
  event: '',
  role: '',
  notes: ''
})

// 判断是否为编辑模式
const isEditMode = ref(!!route.params.id)

// 从localStorage加载所有主持经历
const loadExperiences = () => {
  const experiences = localStorage.getItem('主持经历')
  return experiences ? JSON.parse(experiences) : []
}

// 初始化表单数据
onMounted(() => {
  // 检查登录状态
  if (!authStore.isLoggedIn) {
    router.push('/login')
    return
  }

  // 如果是编辑模式，加载对应的数据
  if (isEditMode.value) {
    const experiences = loadExperiences()
    const experience = experiences.find(item => item.id === route.params.id)
    if (experience) {
      formData.value = {
        ...experience
      }
    } else {
      // 如果找不到对应数据，返回列表页
      router.push('/buyuan/zhuchi')
    }
  }
})

// 保存主持经历
const saveExperience = () => {
  const experiences = loadExperiences()

  if (isEditMode.value) {
    // 编辑现有经历
    const index = experiences.findIndex(item => item.id === route.params.id)
    if (index !== -1) {
      experiences[index] = {
        ...formData.value,
        id: route.params.id
      }
    }
  } else {
    // 添加新经历
    experiences.push({
      ...formData.value,
      id: Date.now().toString() // 使用时间戳作为唯一ID
    })
  }

  // 保存到localStorage
  localStorage.setItem('主持经历', JSON.stringify(experiences))
  // 返回列表页
  router.push('/buyuan/zhuchi')
}

// 返回列表页
const goBack = () => {
  router.push('/buyuan/zhuchi')
}
</script>

<style scoped>
.detail-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.detail-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 25px;
  margin: 20px auto;
  max-width: 800px;
  width: 100%;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.back-btn {
  padding: 8px 12px;
  background-color: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: #e0e0e0;
}

.experience-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.required {
  color: #ff4d4f;
}

.form-group label {
  font-weight: 500;
  color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
}

.form-group textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

.cancel-btn {
  padding: 10px 15px;
  background-color: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.save-btn {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-btn:hover {
  background-color: #45a049;
}
</style>